Using Web Components in XForms |
|
Web components are simple, reusable programs that impart specific functionality to controls in an application. Web components offer various functionality that are not generally available in standard controls.
The use of web components makes the process of developing new applications quick and easy. Moreover, it introduces an element of standardization and uniformity into an application, and reduces the chances of errors.
The web components available in Process Platform are listed as Web Component Libraries. The web components also available in Process Platform XForms are Splitter, Toolbar, Table, Tab Page, Calendar, Select, List, and Translator. The Frame web component is available only with Process Platform XForms.
Note:
Although you can use any of the listed web component libraries, it is recommended that you use the XForms web components, wherever possible, as these provide additional functionality that are not otherwise available.
To use web components, add them to the XForm or to an control in the XForm, as required. You can also specify their definition in the Code Snippet control to add web components.
Process Platform recommends that you directly add the complex web components (such as a tree component) that appear in the XForm during run time. For simple web components such as upload and progress bar, that do not appear in the XForm during run time, you can specify definitions in the Code Snippet control.
Adding Web Components Directly to an XForm
You can use the following methods to add and remove a web component from a control:
- To add, use application.addType(<object>, <fullyQualifiedName>);
- To remove, use application.removeLibrary(<url>,<object>);
where, <url> refers to the path of the web component, and <object> refers to the ID of the control.
After adding the web component to the control, you can access the properties and methods of the web component through the control.
// Adding the "upload" web component to a button with ID "upload" in the Init Done event. function Form_InitDone(eventObject) { application.addType(upload, "wcp.library.util.Upload"); } //Removing the "upload" web component from a button with ID "upload" in the Before Close event. function Form_BeforeClose(eventObject) { application.removeLibrary("/cordys/wcp/library/util/upload.htm",upload); } // onClick event handler for the button "upload" //Accessing the "browse" method of the "upload" web component through the "upload" button. function upload_Click(eventObject) { //Using the browse method on the button. upload.browse(1); }
Note:
Specifying the removeLibrary() method ensures efficient garbage collection.
Adding Web Components using a Code Snippet Control
You can also add a web component to an XForm using the Code Snippet control. To do so, add the following definition of the web component to the Code Snippet control.
//Adding the definition for the 'progressbar' web component <div cordysType="wcp.library.ui.ProgressBar" id='progressbar'></div>
After adding the web component to the Code Snippet control, you can access the properties and methods of the web component using its ID.
//OnClick event handler for the button "startProgress" //Accessing the "start" method through the ID of the progressbar web component. function startProgress_Click(eventObject) { //Start filling the progress bar. progressbar.start(100); }